<template>
	<view>
		<view @tap="GoUser()" class="top_user">
			<image class="userImg" :src="userData.img" mode=""></image>
			<view class="userTxt">
				<p class="p1 one">
					{{userData.name}}
				</p>
				<p v-if="userData.state == 0 " class="p2 one">
					关注 {{userData.follow}} 粉丝 {{userData.fans}}
				</p>
				<p v-if="userData.state == 1 " class="p2 one">
					{{userData.createdDate}}
				</p>
			</view>
			<span class="TabsR" @tap.stop v-if="userData.isCreator == false">
				<view @tap="follow()" v-if="userData.isFollow == false" class="userLabelBg">
					<image class="addIcons " src="../../static/image/addwhite.png" mode=""></image>
					关注
				</view>
				<view @tap="cancel()" v-if="userData.isFollow == true" class="userLabel">
					<image src="../../static/image/icon_duihao@2x.png" mode=""></image>
					已关注
				</view>
			</span>
			<span  class="TabsR" @tap.stop v-if="userData.isCreator == true">
				<view @tap="GoUser()" v-if="userData.state == 0" class="userLabel">
					进入主页
				</view>
				<view @tap="Sets()" v-if="userData.state == 1" class="userLabel" >
					编辑
				</view>
			</span>

		</view>
	</view>
</template>

<script>
	import {
		followAdd,
		followCancel
	} from '../../api/api.js'
	export default {
		props: ['userData'],
		data() {
			return {
				data: []
			}
		},
		mounted() {},
		methods: {
			Sets() {
				this.$emit('Setss')
			},
			async cancel() {
				let data = await followCancel({
					id: this.userData.id
				})
				if (data.code == 0) {
					this.userData.isFollow = false
				}
			},
			GoUser() {
				this.$navigateTo('../users/users?id=' + this.userData.id)
			},
			async follow() {
				let data = await followAdd({
					id: this.userData.id
				})
				if (data.code == 0) {
					this.userData.isFollow = true
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.top_user {
		display: flex;
		.userImg {
			width: 76rpx;
			height: 76rpx;
			border-radius: 50%;
		} 
		.userTxt {
			flex: 1;
			padding-left: 24rpx; 
			.p1 {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(26, 26, 26, 1);
			}

			.p2 {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}
		}

		.userLabel {
			height: 56rpx;
			line-height: 50rpx;
			padding: 0 24rpx;
			border: 1px solid rgba(221, 221, 221, 1);
			border-radius: 28rpx;
			color: #666666; 
			image {
				width: 24rpx;
				height: 24rpx;
				margin-right:6rpx;
			}
		} 
		.userLabelBg {
			height: 56rpx;
			line-height: 56rpx;
			padding: 0 24rpx;
			border-radius: 28rpx;
			background: #1BBF80;
			color: white;
			
			image {
				width: 22rpx;
				height: 22rpx;
				margin-right: 6rpx;
			}
		}
		.TabsR{
			padding-top: 4rpx;
		}
	}
</style>
